<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">


<h:head>

<style>
	body{
		background-image: url("hp-bg.png");
	}
	button{

	}
	#cuerpo{

	}
	input{
		background: null;
	}
</style>

<link type="text/css" rel="Stylesheet" href="../css/jquery-ui-1.8.20.custom.css"/>

</h:head>

<h:body>

<p:layout style="min-width:1000px;min-height:960px;max-width:1000px; margin:0 auto;" id="layout">

    <p:layoutUnit position="north" size="160" style="background-image: url('hp-bg.png');">
        <div style="float: left;">
        	 <img src="images/LogoChimu.jpg" alt="" width="150px" height="150px" />
        </div>
        <div style="text-align: center; vertical-align: middle;">
        	 <h1>COOPERATIVA CHIMU - CARTAVIO</h1>
        	 <h2>MODULO DE PLATAFORMA</h2>
        	 <h1>REGISTRO DE SOLICITUD DE SOCIO - PERSONA</h1>
        </div>
    </p:layoutUnit>


    <p:layoutUnit position="west" size="200" header="Menú" style="background-image: url('hp-bg.png');">
		<p:accordionPanel activeIndex="null">
			<p:tab title="Admisión">
				<p:button value="Consulta Socio Potencial Persona">
				    <f:param name="productId" value="10" />
				</p:button>
				<p:button value="Consulta Socio Potencial Empresa">
				    <f:param name="productId" value="10" />
				</p:button>
				<p:button value="Recepción de documentos Persona">
				    <f:param name="productId" value="10" />
				</p:button>
				<p:button value="Recepción de documentos Empresa">
				    <f:param name="productId" value="10" />
				</p:button>
				<p:button value="Reportes de Admisión">
				    <f:param name="productId" value="10" />
				</p:button>
			</p:tab>
			<p:tab title="Plataforma">
				<p:button value="Registro Solicitud Socio Persona">
				    <f:param name="productId" value="10" />
				</p:button>
				<p:button value="Registro Solicitud Socio Empresa">
				    <f:param name="productId" value="10" />
				</p:button>
				<p:button value="Registro Ficha Socio Persona">
				    <f:param name="productId" value="10" />
				</p:button>
				<p:button value="Registro Ficha Socio Empresa">
				    <f:param name="productId" value="10" />
				</p:button>
				<p:button value="Registro Fondo Fortuorio">
				    <f:param name="productId" value="10" />
				</p:button>
				<p:button value="Registro PequeAhorro">
				    <f:param name="productId" value="10" />
				</p:button>
				<p:button value="Registro JovenCOOP">
				    <f:param name="productId" value="10" />
				</p:button>
				<p:button value="Registro AbueAhorro">
				    <f:param name="productId" value="10" />
				</p:button>
				<p:button value="Depósito a Plazo Fijo">
				    <f:param name="productId" value="10" />
				</p:button>
			    <p:button value="Apertura Cuenta Ahorros">
				    <f:param name="productId" value="10" />
				</p:button>
                <p:button value="Reportes de Admisión">
				    <f:param name="productId" value="10" />
				</p:button>
				
			</p:tab>
			<p:tab title="Créditos">
				<p:button value="Solicitud de Crédito">
				    <f:param name="productId" value="10" />
				</p:button>
				<p:button value="Simulador de Cronogramas">
				    <f:param name="productId" value="10" />
				</p:button>
				<p:button value="Reportes de Admisión">
				    <f:param name="productId" value="10" />
				</p:button>
			</p:tab>
		</p:accordionPanel>
    </p:layoutUnit>

    <p:layoutUnit position="center" style="background-image: url('hp-bg.png');">
		<div id="cuerpo">
			<p:accordionPanel multiple="true" activeIndex="null">
				<p:tab title="Godfather Part I">
					<h:panelGrid columns="2" cellpadding="10">
						<p:graphicImage value="/images/godfather/godfather1.jpg" />
						<h:outputText
							value="The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. 
							His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. T
							hrough Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, kind and benevolent to those who give respect, 
							but given to ruthless violence whenever anything stands against the good of the family." />
					</h:panelGrid>
				</p:tab>
				<p:tab title="Godfather Part II">
					<div class="label">
						<label for="name">Ap. Paterno:</label>
					</div>

					<div class="field">
						<p:inputText id="ApPaterno1" value=""/>
					</div>

					<div class="label">
						<label for="name">Ap. Materno:</label>
					</div>

					<div class="field">
						<p:inputText id="ApPaterno2" value=""/>
					</div>

					<div class="label">
						<label for="name">Nombres:</label>
					</div>

					<div class="field">
						<p:inputText id="ApPaterno4" value=""/>
					</div>
					
					<div class="label">
						<h:outputLabel value="Tipo de Documento :" for="TipoDeDocumento" />
					</div>
						
					<div class="field">
						<p:selectOneMenu id="TipoDeDocumento">
							<f:selectItem itemLabel="DNI" itemValue="1" />
							<f:selectItem itemLabel="PASAPORTE" itemValue="2" />
						</p:selectOneMenu>
					</div>
					
					<div class="label">
						<h:outputLabel value="Tipo de Documento :" for="TipoDeDocumento" />
					</div>
					
					<p:calendar></p:calendar><br/><br/><br/>
					
					<p:panelGrid style="width:720px;">
					    <f:facet name="header">
					        <p:row>
					            <p:column colspan="7">DATOS PERSONALES</p:column>
					        </p:row>
					    </f:facet>
					
						<p:row>
							<p:column style="width:100px;">
				 				<h:outputLabel for="firstname" value="Firstname: *" />
							</p:column>
							<p:column>
								<p:inputText id="firstname" value="" label="Firstname" size="50" />
							</p:column>
						</p:row>
						
						<p:row>
							<p:column style="width:100px;">
				 				<h:outputLabel for="firstname" value="Firstname: *" />
							</p:column>
							<p:column>
								<p:inputText id="firstname" value="" label="Firstname" size="50"/>
							</p:column>
						</p:row>
					
					</p:panelGrid>
					
				</p:tab>
				<p:tab title="Godfather Part III">
					<h:panelGrid columns="2" cellpadding="10">
						<p:graphicImage value="/images/godfather/godfather3.jpg" />
						<h:outputText value="After a break of more than 15 years, director Francis Ford Coppola and writer Mario Puzo returned to the well for this third and final story of the fictional Corleone crime family. 
							Two decades have passed, and crime kingpin Michael Corleone, now divorced from his wife Kay has nearly succeeded in keeping his promise that his family would one day be completely legitimate." />
					</h:panelGrid>
				</p:tab>
			</p:accordionPanel>
		</div>
    </p:layoutUnit>
</p:layout>

</h:body>

</html>